<!-- Layout.vue 布局组件，碎片组装器 -->
<template>
	<el-container class="vue-container">
		<el-header class="vue-header"><Header :user="user" /></el-header>
		<el-container>
			<el-aside
				:style="{
					width: this.$VuexStore.state.collapse ? '65px' : '180px',
				}"
				class="vue-sidebar"
			>
				<SideBar :menus="menus" />
			</el-aside>
			<el-container>
				<el-main>
					<!-- 面包屑导航 -->
					<BreadCrumb />
					<!--
						内容区
						将 user 传递给子组件，接受数据并进行修改
					-->
					<!-- <router-view :user="user" @emitUserData="receiveUserData" /> -->
					<router-view :user="user"/>
				</el-main>
				<el-footer class="vue-footer" height="40px;">
					<Footer :webSiteInfo="webSiteInfo" />
				</el-footer>
			</el-container>
		</el-container>
	</el-container>
</template>

<script>
import Header from "@/components/fragments/Header.vue";
import Footer from "@/components/fragments/Footer.vue";
import SideBar from "@/components/fragments/SideBar.vue";
import BreadCrumb from "@/components/fragments/BreadCrumb.vue";

export default {
	name: "Layout",
	data() {
		return {
			user: this.$TestData.user,
			webSiteInfo: this.$TestData.webSiteInfo,
			menus: this.$TestData.navigationData,
		};
	},
	components: {
		Header,
		Footer,
		SideBar,
		BreadCrumb,
	},
};
</script>

<style scoped>
.el-header,
.el-footer {
	background-color: #b3c0d1;
	color: #333;
	text-align: center;
	line-height: 60px;
}

.el-aside {
	background-color: #5a545e;
	color: #333;
	text-align: center;
	line-height: 200px;
}

.el-main {
	background-color: #fdfbf1;
	color: #333;
	/* text-align: center; */
	/* line-height: 160px; */
}

body > .el-container {
	margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
	line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
	line-height: 320px;
}
/* ======== 自定义 ======== */
.vue-container {
	/* font-family: "monaco";
	font-size: 13px; */
	position: absolute;
	width: 100%;
	top: 0px;
	left: 0;
	bottom: 0;
}
.vue-header {
	padding: 0;
	z-index: 1000;
}
.vue-footer {
	line-height: 40px;
	background: #e0dfd6;
	display: block;
	float: right;
}
</style>